import { Component } from 'react';
import Header from '../header/Header';

import './Main.scss';
class Main extends Component {
  state = {
    list: [
      { title: 'fake', content: '沙发！！！' },
      { title: 'you', content: '板凳！！！' },
      { title: 'maze', content: '坐胡！！！' },
    ],
  };
  // 删除评论
  del = (e) => {
    this.state.list.splice(e, 1);
    this.setState({
      list: this.state.list,
    });
  };
  CommentList = (e) => {
    let list = this.state.list.concat([e]);
    this.setState({
      list,
    });
  };
  render() {
    return (
      <div className="comment">
        <Header CommentList={this.CommentList} />
        <main>
          <ul>
            {this.state.list.map((item, index) => (
              <li key={index}>
                <span className="content">
                  评论人: <i>{item.title}</i>
                </span>
                <span
                  className="iconfont icon-cuowuguanbiquxiao"
                  onClick={() => this.del(index)}
                >
                  {' '}
                </span>
                <p>
                  {' '}
                  评论内容: <i> {item.content} </i>{' '}
                </p>
              </li>
            ))}
          </ul>
        </main>
      </div>
    );
  }
}

export default Main;
